<template>
	<view class="box_">
		<!-- 头部 -->
		<view class="title_">华成立昌</view>
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="address-box">
				<view class="address-text">济南</view>
				<u-icon name="arrow-down" color="#000000" size="16"></u-icon>
			</view>
			<view class="search-container">
				<u-icon name="search" color="#969696" size="28"></u-icon>
				<input type="text" class="input_" placeholder="搜索商品" />
				<view class="search-btn">搜索</view>
			</view>
		</view>
		<!-- 推荐文字 -->
		<view class="text-box">
			<view class="text-info">
				<u-icon name="checkmark-circle-fill" color="#216AC1" size="16"></u-icon>
				<view class="text-content">海量产品供您选</view>
			</view>
			<view class="text-info">
				<u-icon name="checkmark-circle-fill" color="#216AC1" size="16"></u-icon>
				<view class="text-content">官方保障放心买</view>
			</view>
			<view class="text-info">
				<u-icon name="checkmark-circle-fill" color="#216AC1" size="16"></u-icon>
				<view class="text-content">1对1售后服务</view>
			</view>
		</view>
		<!-- 图片 -->
		<view class="image-box">
			<image class="image_" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160943448199528448.png" mode="">
			</image>
		</view>
		<!-- 设备菜单按钮 -->
		<view class="device-box">
			<view class="device-info">
				<image class="device-img" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160944994052210688.png"
					mode=""></image>
				<view class="device-title">涂装设备</view>
			</view>
			<view class="device-info">
				<image class="device-img" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160945041292656640.png"
					mode=""></image>
				<view class="device-title">洗车设备</view>
			</view>
			<view class="device-info">
				<image class="device-img" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160945087790710784.png"
					mode=""></image>
				<view class="device-title">环保设备</view>
			</view>
			<view class="device-info">
				<image class="device-img" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160945124373430272.png"
					mode=""></image>
				<view class="device-title">附加设备</view>
			</view>
		</view>
		<!-- 租卖 -->
		<view class="rent-sell">
			<view class="tab-box">
				<view class="tab-info" :class="{active:tabIndex==index}" v-for="(item,index) in tabList" :key="index"
					@click="chooseTab(index)">
					<view class="tab-title">
						<text>{{item.title}}</text>
						<image class="tab-img" v-if="tabIndex==index" src="/static/image/tab-choose.png" mode="">
						</image>
					</view>
					<text class="tab-desc">{{item.desc}}</text>
				</view>
			</view>
			<view class="content-box">
				<view class="process-box">
					<view class="process-info">
						<image class="process-img" src="/static/image/shop-info.png" mode=""></image>
						<view class="process-text">提交出售商品信息</view>
					</view>
					<u-icon name="arrow-right-double" color="#8E6D4F" size="20"></u-icon>
					<view class="process-info">
						<image class="process-img" src="/static/image/engineer-info.png" mode=""></image>
						<view class="process-text">工程师上门记录设备信息</view>
					</view>
					<u-icon name="arrow-right-double" color="#8E6D4F" size="20"></u-icon>
					<view class="process-info">
						<image class="process-img" src="/static/image/baojia.png" mode=""></image>
						<view class="process-text">设备专家评估出参考报价</view>
					</view>
					<u-icon name="arrow-right-double" color="#8E6D4F" size="20"></u-icon>
					<view class="process-info">
						<image class="process-img" src="/static/image/submit.png" mode=""></image>
						<view class="process-text">成交</view>
					</view>
				</view>
				<view class="sell-btn">我有设备出售</view>
			</view>
		</view>
		<!-- 热门产品 品牌专区 -->
		<view class="hot-vip">
			<view class="hot-box">
				<view class="title-box">
					<view class="title-text">
						<text>热门产品</text>
						<view class="hot-icon">HOT</view>
					</view>
					<view class="more-box">
						<text style="margin-right: 2px;">更多</text>
						<u-icon name="arrow-right" color="#7A7A7A" size="18"></u-icon>
					</view>
				</view>
				<view class="product-box">
					<view class="product-info" v-for="(item,index) in 3">
						<image class="product-img"
							src="https://seep.sdstm.cn/oss/upload/image/20251009/1160975475296698368.png" mode="">
						</image>
						<view class="product-content">
							<view class="product-title">双工位预喷房（下排风）</view>
							<view class="price-box">
								<view class="now-price">￥18600</view>
								<view class="old-price">￥20000</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="vip-box">
				<view class="title-box">
					<view class="title-text">
						<text>品牌专区</text>
						<view class="vip-icon">VIP</view>
					</view>
					<view class="more-box">
						<text style="margin-right: 2px;">更多</text>
						<u-icon name="arrow-right" color="#7A7A7A" size="18"></u-icon>
					</view>
				</view>
				<view class="product-box">
					<view class="product-info" v-for="(item,index) in 3">
						<image class="product-img"
							src="https://seep.sdstm.cn/oss/upload/image/20251009/1160975475296698368.png" mode="">
						</image>
						<view class="product-content">
							<view class="product-title">双工位预喷房（下排风）</view>
							<view class="price-box">
								<view class="now-price">￥18600</view>
								<view class="old-price">￥20000</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tab列表 -->
		<u-tabs :list="list1" lineWidth="30" lineColor="#216AC1" :activeStyle="{
		            color: '#216AC1',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#1d1e1f',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<!-- 商品列表 -->
		<view class="shop-list">
			<view class="shop-info" v-for="(item,index) in 4">
				<image class="shop-img" src="https://seep.sdstm.cn/oss/upload/image/20251009/1160985819377303552.png"
					mode=""></image>
				<view class="shop-content">
					<view class="shop-title">喷烤漆房 经济型 (埋地安装)</view>
					<view class="shop-desc">
						<view class="shop-rent">可租</view>
						<view class="shop-label">Blowtherm/宝富</view>
					</view>
					<view class="price-box">
						<view class="now-price">￥18600</view>
						<view class="old-price">￥20000</view>
					</view>
				</view>
				<view class="label_" v-if="index==1">二手</view>
			</view>
		</view>

		<!-- 咨询客服 -->
		<view class="consult-box">
			<image class="consult-img" src="/static/image/consult.png" mode=""></image>
			<view class="consult-text">咨询客服</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					title: '我想租',
					desc: '10万+产品随心挑选'
				}, {
					title: '我想卖',
					desc: '1万+买家求购'
				}, ],
				list1: [{
					name: '喷涂车间',
				}, {
					name: '烤漆房',
				}, {
					name: '举升机'
				}, {
					name: '洗车机'
				}, {
					name: '冷媒机'
				}, {
					name: '扒胎机'
				}, {
					name: '平衡机'
				}]
			}
		},
		methods: {
			chooseTab(index) {
				this.tabIndex = index;
			},
		}
	}
</script>

<style scoped>
	.box_ {
		background-color: #F1F4FF;
		min-height: 100vh;
		padding: 45px 14px 10px;
		box-sizing: border-box;
	}

	.title_ {
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		margin-top: 8px;
	}

	.search-box {
		display: flex;
		align-items: center;
		margin: 20px 0;
	}

	.address-box {
		display: flex;
	}

	.address-text {
		margin-right: 5px;
		color: #000;
	}

	/* 搜索框样式 */
	.search-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2px solid #21221E;
		background-color: #fff;
		border-radius: 5px;
		padding: 0 5px;
		box-sizing: border-box;
		height: 40px;
		flex: 1;
		margin-left: 10px;
		font-size: 14px;
	}

	.input_ {
		margin-left: 5px;
		color: #969696;
		flex: 1;
	}

	.search-btn {
		background-color: #216AC1;
		color: #fff;
		padding: 5px 5px 5px 16px;
		box-sizing: border-box;
		border-radius: 10px 5px 5px 8px;
		clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
	}

	.text-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.text-info {
		display: flex;
		align-items: center;
	}

	.text-content {
		color: #000;
		margin-left: 5px;
		font-size: 14px;
	}

	.image-box {
		width: 100%;
		height: 170px;
		border-radius: 10px;
		margin-top: 20px;
	}

	.image_ {
		width: 100%;
		height: 100%;
	}

	.device-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
	}

	.device-info {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
		width: 23%;
	}

	.device-img {
		width: 100%;
		height: 50px;
	}

	.device-title {
		font-size: 14px;
	}

	.rent-sell {
		background-color: #fff;
		border-radius: 10px;
		margin-top: 20px;
	}

	.tab-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		line-height: 40px;
		color: rgba(0, 0, 0, 0.8);
		font-size: 18px;
	}

	.tab-info {
		width: 50%;
		padding: 10px 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		font-size: 16px;
	}

	.tab-title {
		position: relative;
	}

	.active {
		font-size: 18px;
		font-weight: bold;
		/* background: linear-gradient(#BFD8F5, #cee1f8); */
		position: relative;
		z-index: 1;
	}

	/* 左侧选项选中时的样式 */
	.tab-info:first-child.active {
		border-radius: 10px 10px 10px 0;
		padding-right: 12px;
		background-image: url('/static/image/tab-left.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	/* 右侧选项选中时的样式 */
	.tab-info:last-child.active {
		border-radius: 10px 10px 0 10px;
		background-image: url('/static/image/tab-right.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.tab-desc {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.5);
		margin-left: 8px;
		font-weight: normal
	}

	.tab-img {
		width: 16px;
		height: 16px;
		position: absolute;
		right: -9px;
		bottom: 2px;
		z-index: 0;
	}

	.content-box {
		background: linear-gradient(to bottom, #cee1f8, #eff5fc, #FFFFFF);
		border-radius: 10px;
		padding: 14px 0;
		box-sizing: border-box;
	}

	.process-box {
		background-image: url("https://seep.sdstm.cn/oss/upload/image/20251009/1160972799632736256.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		padding: 14px;
		box-sizing: border-box;
		margin: 5px 14px 14px;
		border-radius: 10px;
	}

	.process-info {
		text-align: center;
	}

	.process-img {
		width: 40px;
		height: 44px;
	}

	.process-text {
		color: #A77933;
		font-size: 12px;
		margin-top: 10px;
	}

	.sell-btn {
		width: 60%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background-color: #216AC1;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		border-radius: 50px;
		margin: 0 auto;
	}

	.hot-vip {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		display: flex;
	}

	.hot-vip::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.hot-box {
		background: linear-gradient(to top, #FFFFFF, #fff9f8, #FFDFDD);
		border-radius: 10px;
		width: 70%;
		margin: 14px 14px 14px 0;
		padding: 14px;
		box-sizing: border-box;
	}

	.title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title-text {
		display: flex;
		color: #002149;
		font-size: 18px;
		font-weight: bold;
		align-items: center;
	}

	.hot-icon {
		margin-left: 5px;
		background-color: #F04D35;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		box-sizing: border-box;
		border-radius: 40px;
		font-weight: normal;
	}

	.more-box {
		display: flex;
		align-items: center;
	}

	.product-box {
		margin-top: 20px;
	}

	.product-info {
		display: flex;
		align-items: center;
		margin-bottom: 14px;
	}

	.product-img {
		width: 50px;
		height: 40px;
	}

	.product-content {
		flex: 1;
		margin-left: 5px;
		font-size: 14px;
	}

	.product-title {
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.price-box {
		display: flex;
		margin-top: 5px;
	}

	.now-price {
		font-weight: 400;
		color: #F8485D;
	}

	.old-price {
		font-size: 12px;
		color: #B3AFAF;
		text-decoration: line-through;
		margin-left: 5px;
	}

	.vip-box {
		background: linear-gradient(to top, #FFFFFF, #fffdfa, #FAD88F);
		border-radius: 10px;
		width: 70%;
		margin: 14px 14px 14px 0;
		padding: 14px;
		box-sizing: border-box;
	}

	.vip-icon {
		margin-left: 5px;
		background-color: #A87A35;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		box-sizing: border-box;
		border-radius: 40px;
		font-weight: normal;
	}

	.shop-list {
		margin: 10px 0;
	}

	.shop-info {
		display: flex;
		align-items: center;
		background: #fff;
		margin-bottom: 10px;
		box-shadow: 0 2px 0 rgba(67, 75, 162, 0.05);
		border-radius: 10px;
		padding: 14px;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}

	.shop-img {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		border: 1px solid #EBEBEB;
		overflow: hidden;
	}

	.shop-content {
		flex: 1;
		margin-left: 10px;
	}

	.shop-title {
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.shop-desc {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.shop-rent {
		margin-right: 5px;
		background-color: #77B663;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		box-sizing: border-box;
		border-radius: 40px;
		font-weight: normal;
	}

	.shop-label {
		background-color: #F5F5F5;
		color: #5A5656;
		font-size: 12px;
		padding: 2px 5px;
		box-sizing: border-box;
		border-radius: 40px;
		font-weight: normal;
	}

	.label_ {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #216AC1;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		box-sizing: border-box;
		border-radius: 0 0 0 5px;
	}

	.consult-box {
		position: fixed;
		right: 10px;
		bottom: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(to bottom, #FF3D3C, #FEA15A);
		border-radius: 30px;
		padding: 3px 3px 10px;
		box-sizing: border-box;
	}

	.consult-img {
		width: 34px;
		height: 34px;
		border-radius: 50%;
	}

	.consult-text {
		color: #fff;
		writing-mode: vertical-lr;
		text-orientation: upright;
		margin-top: 5px;
	}
</style>